<template>
  <div class="left-div">
    <LabItemsListA @changeSelect="changeSelect"></LabItemsListA>
  </div>
  <div class="mid_div">
    <LabItemsListB ref="secondTable" @changeSelect2="changeSelect2" :change1Id="change1SelectItem"></LabItemsListB>
  </div>
  <div class="right-div">
    <LabItemsListC ref="thirdTable" :change2Id="change2SelectItem"></LabItemsListC>
  </div>
</template>

<script lang="ts" name="items-labItems" setup>
  import LabItemsListA from './LabItemsListA.vue';
  import LabItemsListB from './LabItemsListB.vue';
  import LabItemsListC from './LabItemsListC.vue';
  import { ref, nextTick } from 'vue';
  let change1SelectItem = ref(null);
  let change2SelectItem = ref(null);
  const secondTable = ref();
  const thirdTable = ref();

  const changeSelect = (item) => {
    change1SelectItem.value = item;
    nextTick(() => {
      secondTable.value.reload();
      secondTable.value.clearSelectedRowKeys();
    });
  };
  const changeSelect2 = (item) => {
    change2SelectItem.value = item;
    nextTick(() => {
      thirdTable.value.reload();
    });
  };
</script>
<style lang="less" scoped>
  .jeecg-basic-table-form-container {
    .table-page-search-submitButtons {
      display: block;
      margin-bottom: 24px;
      white-space: nowrap;
    }

    .query-group-cust {
      width: calc(50% - 15px);
      min-width: 100px !important;
    }

    .query-group-split-cust {
      width: 30px;
      display: inline-block;
      text-align: center;
    }
  }

  .container {
    display: flex; //创建盒子,元素自动水平排列
  }

  .table-wrapper {
    margin-right: 10px;
    /* 通过设置间距可调整表格之间的间隔 */
  }

  .form-item-1 {
    flex-basis: 200px;
  }

  .form-item-2 {
    flex-basis: 200px;
  }

  .form-item-3 {
    flex-basis: 500px;
  }

  .left-div {
    float: left;
    width: 33%;
    height: 100%;
    padding: 2px;
  }

  .mid_div {
    float: left;
    width: 33%;
    height: 100%;
    padding: 2px;
  }

  .right-div {
    float: right;
    width: 34%;
    height: 100%;
    padding: 2px;
  }
  :deep(.jeecg-layout-content) {
    box-sizing: border-box;
    height: calc(100% - 32px) !important;
  }
  :deep(.ant-spin-container) {
    height: calc(100% - 76px) !important;
    padding-top: 16px;
    box-sizing: border-box;
  }
  :deep(.ant-spin-nested-loading) {
    height: 100% !important;
  }
</style>
